<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>充值</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <link href="${pageContext.request.contextPath}/static/css/common.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/layer/skin/layer.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/css/bootstrap.min.css"
          rel="stylesheet">
          <link href="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/css/select2.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/font-awesome-4.3.0/css/font-awesome.min.css"
          rel="stylesheet">
          <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/jquery.time/jquery.timepicker.min.css">
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="/static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/layer/layer.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/js/select2.min.js"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/My97DatePicker/WdatePicker.js"
        type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/jquery.time/jquery.timepicker.min.js"
        type="text/javascript"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/global.js"></script>
	<style type="text/css">
	*{margin:0;padding:0;}
	.wraper{
		padding:0px 0px;
	}
	.content{
		padding:20px 3%;
	}
	.col-md-1{
		text-align:right;
	}
	.btn{
		width:110px;
		padding: 5px 0;
		border:1px solid #c8edff;
		
	} 
	.content .row{
		padding:10px 0;
	}
	.box{
		margin-top:20px;
		
		padding:20px 20px;
		
	}
	.box ol{
		padding-left:14px;
		line-height:20px;
	}
	.txt{
		color:#333;
		font-size:14px;
		margin-right:70px;
		line-height:30px;
	}
	.txt input{
	   display:inline-block;
	   height:30px;
	   *+height:22px;
	   margin-right:5px;
	   vertical-align: middle;
	   
	}
	.titles{
		font-size:20px;
		*+font-size:18px;
		color:#333;
		overflow:hidden;
		width:100%;
		padding:5px 20px;
		background:#f3f3f3;
		
	}
	.titles .span1{
		float: left;
	}
	.titles .span2{
		float:right;
	}
	.lt{
		float:left;
	}
	.cearfix{
		overflow:hidden;
	}
	.msg{
		border-bottom:1px solid #ccc;
		padding-bottom:20px;
	}
	.box li{
		line-height:50px;
		font-size:18px;
		font-weight: normal;
	}
	.btn button{
		height: 30px;
	    line-height: 26px;
	    background: none;
	    border: none;
	    outline: none;
	}
	.pays{
		padding-left:34px;
	}
	.pays .pay{
	  width:220px;
	  height:50px;
	  *+line-height:38px;
	  outline: none;
	}
	.btn-primary{
		background:#228ded !important;
		border-color:#228ded !important;
		font-size:20px !important;
	}
	.box label{
		width:100px;
		margin-right:40px;
	}
	.limit{
		display:inline-block;
		width:360px;
		padding-left:20px;
	}
	.checkbox{
		display:inline-block;
		width:20px;
		height:20px;
	
		border:1px solid #ccc;
	}
	.box li {
		margin:2px;
		height:50px;
		line-height:38px;
		font-size:20px;
		padding:0 20px;
	}
	.box li lt{
		display:inline-block;
	}
	.box li img{
		vertical-align: middle;
		padding-left:20px;
	}
	.images{
	   height:48px;
	   height:48px\0;
	   padding:8px 20px;
	   padding:10px\0/;
	   text-align:center;
	}
	.glyphicon{
		top:1px;
		top:-3px\0/;
		font-size:14px;
		font-size:20px\0/;
	}
	.glyphicon-ok{
		color:#f36875;
		font-weight:400;
	}
	#box  .red{
		border-color:#f36875;
	}
	#box .border{
	
		border:2px #c8edff solid;
	}
	.hid{
		display:none;
	}
	.hid input{
		width:230px;height:36px;display:inline-block;
		margin-bottom:20px;margin-left:36px;
		padding:2px;
	}
	#box .block{
		display:block;
	}
	.hid a{
		color:#2ea7e7;
	}
	</style>
<body>
<div class="wraper">
 	 <div class="titles"> 
	 	 <div class="span1">选择支付方式</div> 
	 	 <div class="span2">x</div>
 	 </div>
	 <div class="content"> 
	  <div class="msg cearfix">
	  	<p class="txt lt">充值账户： <span class="">18280285685</span></p>
	  	<p class="txt lt">充值金额：<span style="color:red;font-size:22px;">￥500.00</span>元</p>
	  </div>
	 
	  <div class="box" id="box">
	  <ul style="position:relative;">
	  	<li>
	  		<span class="checkbox lt"><span class="glyphicon"></span></span>
	  		<div class="lt images"><img src="${pageContext.request.contextPath}/static/images/admin/wallet/zfb.jpg" /></div>
		  	<div class="lt" style="padding:3px 10px;padding-top:0\0;">支付宝支付</div>
		  	
	  	</li>
	  
	  	<li>
		  <span class="checkbox lt"><span class="glyphicon"></span></span>
		  <div class="lt images"><img src="${pageContext.request.contextPath}/static/images/admin/wallet/wx.jpg" /></div>
		  	<div class="lt" style="padding:3px 10px;">微信支付</div>
	  	</li>
	  	<li>
		  <span class="checkbox lt"><span class="glyphicon"></span></span>
		  <div class="lt images"><img src="${pageContext.request.contextPath}/static/images/admin/wallet/ttzf_03.jpg" /></div>
		  	<div class="lt" style="padding:3px 10px;">银行卡快捷支付</div>
		  	
		  	<!--  <span class="limit lt" style="font-size:14px;">储蓄卡（8611）|单笔限额5000</span>-->
	  	</li>
	  	<!--<div class="btn" style="position:absolute;top:110px;top:108px\9;*+top:120px;left:660px;">
		  		<button style="color:#85b1dc !important;">+添加新卡</button>
		  </div>-->
	  </ul>
	  		
	  </div>
	 <div class="hid">
	 	 <input type="text" />
	 	 <a>设置平台交易密码/</a> <a>忘记支付密码？</a>
	 </div>
	  <div class="pays"><button class="btn btn-primary pay" value=""/>下一步</button></div>
	 </div>
</div>
<script type="text/javascript">
  var $li=$("#box li");
  $li.click(function(){
	 $(this).addClass("border").siblings().removeClass("border");
	 $(this).find(".checkbox").addClass("red");
	 $(this).find(".glyphicon").addClass("glyphicon-ok");
	 $(this).siblings().find(".glyphicon").removeClass("glyphicon-ok");
	 $(this).siblings().find(".checkbox").removeClass("red");
	
  });
  $li[0].onclick=function(){
		 $(".hid")[0].style.display="none";
	};
 $li[1].onclick=function(){
		 $(".hid")[0].style.display="none";
 };
 $li[2].onclick=function(){
	 $(".hid")[0].style.display="block";
 };
  
</script>
</body>
</html>
